<template>
  <div class="app-container">
  <!-- 查询表单 -->
    <el-form ref="queryForm" :inline="true" :model="queryParams" label-width="80px">
      <el-form-item label="开发者" label-width="60px">
        <el-input v-model="queryParams.developers" size="small" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="需求标题">
        <el-input v-model="queryParams.title" size="small" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="需求紧急度" label-width="100px">
        <el-select v-model="queryParams.demandEmergency">
          <el-option v-for="item in emergOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提出时间">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          size="small" 
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作行 -->
    <el-row :gutter="10" class="mb8">
      <el-col>
        <el-button 
        icon="el-icon-plus" size="small" type="primary" plain :span="1.5"
      @click="handleAdd">
      新增
      </el-button>
      </el-col>
    </el-row>
    <!-- 需求列表 -->
    <el-table
      :data="demandList"
      style="width: 100%">
      <el-table-column
        prop="title"
        label="需求标题">
      </el-table-column>
      <el-table-column
        prop="demandEmergency"
        label="需求紧急度"
        width="180">
      </el-table-column>
      <el-table-column
        prop="demandStatus"
        label="需求状态">
      </el-table-column>
      <el-table-column
        prop="updateUserId"
        label="提出人">
      </el-table-column>
      <el-table-column
        prop="forwardTime"
        label="提出时间"
        width="180">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="row">
          <el-button type="text" icon="el-icon-edit" @click="handleUpdate(row)" size="small">修改</el-button>
          <el-button type="text" icon="el-icon-delete" size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新建/修改对话框 -->
    <el-dialog 
      :title="title" 
      :visible.sync="open" 
      width="550px"
    >
      <el-form 
        ref="form" 
        :model="form" 
        label-width="100px"
        :rules="rules"
      >
        <el-form-item 
          label="需求标题" 
          prop="title"
        >
          <el-input 
            v-model="form.title" 
          >
          </el-input>
        </el-form-item>
        <br>
        <el-form-item label="开发者" prop="developers">
          <el-select v-model="form.developers">
            <el-option
              v-for="item in developersOptions"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="需求描述" prop="desc">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
          
            v-model="form.demandrequirementDescription">
          </el-input>
        </el-form-item>
        <el-form-item label="需求紧急度" prop="demandEmergency">
          <el-select v-model="form.demandEmergency">
            <el-option v-for="item in emergOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <br>
        <!-- 附件和附件说明 -->
        
        <div
          v-for="(attch, index) in form.attachments" :key="attch.key"
          
        >
          <span style="font-weight:600">附件{{index + 1}}：</span>
          <br>
          <br>
          <el-form-item label="附件上传" class="upload"
            :prop="`attachments.` + index + `.attachFile`"
          >
            <el-upload
              class="upload-demo"
              v-model="attch.attachFile"
              action="https://jsonplaceholder.typicode.com/posts/"
              :file-list="form.attachFile">
              <el-button size="small" type="primary">点击上传</el-button>
              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </el-upload>
          </el-form-item>
          <el-form-item label="附件描述" class="desc">
            <el-input
              type="textarea"
              :rows="1"
              placeholder="请输入内容"
              v-model="attch.attachDesc"
              style="width:200px"  
            >
            </el-input>
            <div class="addDelete">
            <i
              v-if="index == form.attachments.length - 1"
              @click="addAttach"
              class="el-icon-circle-plus-outline"
            ></i>
            <i
              v-if="index !== form.attachments.length - 1"
              @click="removeAttach(index)"
              class="el-icon-remove-outline"
            ></i>
          </div>
          </el-form-item>
          <!-- <el-fort-item>
            <el-button icon="el-icon-plus" type="primary"
            @click="addAttachment"></el-button>
          </el-fort-item> -->
          <!-- {{index}}
          {{form.attachments.length}} -->
          
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listDemand, listDevlopers, addDemand } from '@/api/demand.js'

export default {
  data () {
    return {
      // 总条数
      total: 0,
      // 用户表格数据
      demandList: [
        // {
        //   id: 1,
        //   demandEmergency: '1',  // 需求紧急度
        //   forwardTime:'2022-11-5',  //提出时间
        //   title:'title1',  //需求标题
        //   developers: 'zzw',  //开发者
        //   demandStatus: 1
        // }
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        developers: undefined,
        title: undefined,
        demandEmergency:undefined
      },
      // 查询日期范围
      dateRange: [],
      // 紧急度数据字典
      emergOptions: [
        {
          dictValue:'1',
          dictLabel:'十万火急'
        },
        {
          dictValue:'2',
          dictLabel:'紧急'
        },
        {
          dictValue:'3',
          dictLabel:'一般'
        },
        {
          dictValue:'4',
          dictLabel:'无所谓'
        },
        ],
        // 新增/修改对话框是否可见
        open: false,
        // 对话框标题
        title:'',
        // 开发者列表
        developersOptions: [],
        form: {
          developers:'',
          title: '',
          demandEmergency: undefined,
          // // 提出日期自动生成
          // dateRange: [],
          // 附件相关信息列表
          attachments: [
            {
              attachFile: {},
              attachDesc:''
            }
          ]
        },
        // 新增/修改表单验证规则
        rules: {
          developers: [
            { required: true, message: '请选择开发者', trigger: 'blur' },
          ],
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          demandEmergency: [
            { required: true,message: '请选择需求紧急度', trigger: 'blur' }
          ],
          requirementDescription: [
            { required: true, message: '请输入需求描述', trigger: 'blur' }
          ]
        }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取需求列表
    getList() {
      this.loading = true
      listDemand(this.addDateRange(this.queryParams, this.dateRange)).then( res => {
        this.demandList = res.rows

      })
    },
    // 表单重置
    resetForm() {
      this.form = {
        id: undefined,
        roleName: undefined,
        roleKey: undefined,
        roleSort: 0,
        status: "1",
        menuIds: [],
        deptIds: [],
        menuCheckStrictly: false,
        deptCheckStrictly: 1,
        remark: undefined
      }
      // 对 ref="form" 的整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      this.resetForm("form");
    },
    // 需求列表查询
    handleQuery () {
      this.getList()
    },
    resetQuery() {},
    handleAdd() {
      this.getDevInfo()
      this.title = '新增',
      this.open = true
      
    },
    // 修改
    handleUpdate (row) {
      console.log('修改',row);
    },
    handleDelete (row) {
      console.log('删除',row);
    },
    // 获取开发者信息
    getDevInfo() {
      listDevlopers().then(res => {
        this.developersOptions = res.data
      })
    },
    // 新增/修改对话框确定
    submitForm() {
      console.log('submit');
      // 1.校验
      this.$refs["form"].validate(valid => {
        // 
        if (valid) {
          // 修改窗口
          if(this.form.id != undefined) {

          } else {
            addDemand(this.form).then(res => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            })
          }
        }
      })

    },
    addAttach() {
      console.log();
        this.form.attachments.push({
          value: '',
          key: Date.now()
        });
    },
    removeAttach(index) {
      this.form.attachments.splice(index, 1)
    },

  }
}
</script>

<style scoped lang="scss">
//图标样式
.addDelete {
  position: absolute;
  top: 10px;
  right: -25px;
  display: flex;
  flex-direction: column;
  i {
    font-size: 18px;
    flex: 1;
  }
  .el-icon-circle-plus-outline {
    color: #2d8cf0;
  }
  .el-icon-remove-outline {
    color: red;
  }
}
.desc,
.upload {
  display: inline-block;
}
</style>
